'use strict';
var React = require('react');
class ReDialog extends React.Component {
    /* static defaultProps= {
            title: '提示',
            ok:'确定',
            content:'默认值'
    };*/
    constructor(props) {
        super(props);
        this.state = {
            visible:false,//控制弹框显示状态
            isMask:false,//是否显示遮罩层
            isCancel:false,//是否显示取消按钮
            isOk:true,//是否显示确定按钮
            isPrompt:false,//是否显示输入框
            title: '提示',//标题
            ok:'确定',//确认按钮文本
            content:'默认值',//
            cancel:'取消',
            inputValue:''
        };
        this.getMainClass=this.getMainClass.bind(this);
        this.okAndHideDialog=this.okAndHideDialog.bind(this);
        this.cancelAndHideDialog=this.cancelAndHideDialog.bind(this);
        this.renderContent=this.renderContent.bind(this);
        this.valueChange=this.valueChange.bind(this);
        this.createMarkup=this.createMarkup.bind(this);
        ReDialog.showDialog=ReDialog.showDialog.bind(this);
        ReDialog.hideDialog=ReDialog.hideDialog.bind(this);
    }

    //显示弹框
    static showDialog(argNames){
        setTimeout(()=>{
            this.setState(argNames);
            this.setState({
                visible:true
            });
        },0);
    }

    static hideDialog(){
        this.cancelAndHideDialog();
    }

    //确定并隐藏弹框，此处将content值修改，避免上一次编辑的值残留到下一次
    okAndHideDialog(){
        setTimeout(()=>{
            this.setState({
                visible:false,
                isMask:false,
                content:''
            });
            if(this.state.result != undefined) {
                if (this.state.isPrompt) {
                    this.state.result(this.state.inputValue);
                    this.setState({
                        inputValue:''
                    });
                }
                else {
                    this.state.result(true);
                }
            }
        },0);
    }

    //取消并隐藏弹框，此处将content值修改，避免上一次编辑的值残留到下一次
    cancelAndHideDialog(){
        this.setState({
            visible:false,
            isMask:false,
            content:''
        });
        if(this.state.result !=undefined){
            this.state.result(false);
        }
    }

    //弹框主样式
    getMainClass(){
        if(this.state.visible){
            return 'ReDialogBorder';
        }
        else{
            return 'ReDialogBorder HideDialog'
        }
    }

    //是否添加遮罩层
    isMask(){
        if(this.state.isMask){
            return 'ReDialogMask'
        }
        else{
            return 'ReDialogTransparent'
        }
    }

    //是否显示取消按钮
    isShowCancel(){
        if(this.state.isCancel){
            return 'ReDialogShowCancel'
        }
        else{
            return 'ReDialogHideCancel'
        }
    }

    isShowOk(){
        if(this.state.isOk){
            return 'ReDialogOK'
        }
        else{
            return 'ReDialogHideCancel'
        }
    }

    //绑定input的值
    valueChange(event) {
        this.setState({
            inputValue:event.target.value
        });
    }

    createMarkup(content) {
        return {__html: content};
    };

    renderContent(){
        return !this.state.isPrompt?this.state.content:<input className="ReDialogInput"  value={this.state.inputValue} onChange={this.valueChange}></input>
    }

    render() {
        var title = this.state.title;
        var content = this.state.content;
        var ok=this.state.ok;
        var cancel=this.state.cancel;
        var dialogStyle={};
        var contentStyle={
            bottom: '95px'
        };
        var contentHeight="";
        if(this.state.dialogWidth&&this.state.dialogHeight){
            contentHeight=this.state.dialogHeight.replace("px",'')-106+"px";
            dialogStyle={
                width:this.state.dialogWidth,
                height:this.state.dialogHeight,
                marginTop:this.state.dialogHeight.replace("px",'')/-2+"px"
            };
            contentStyle={
                height:contentHeight,
                lineHeight:typeof(this.state.content)=='object'?'100%':contentHeight
            }
        }
        return (
            <div>
                <div className={this.isMask()}>
                </div>

                <div className={this.getMainClass()} style={dialogStyle}>
                    <div className="ReDialogTitle"><span>{title}</span><button className="closeButton" onClick={this.cancelAndHideDialog}>×</button></div>
                    <div className="ReDialogContent" style={contentStyle}>
                        {this.renderContent()}
                    </div>
                    <div className="ReDialogButtons">
                        <button id="ReDialogOK" className={this.isShowOk()} onClick={this.okAndHideDialog}>{ok}</button>
                        <button id="ReDialogCancel" className={this.isShowCancel()} onClick={this.cancelAndHideDialog}>{cancel}</button>
                    </div>
                </div>
            </div>
        );
    }
}

//nodejs和es6暂不支持在class中直接定义属性，暂换成此写法，对于propTypes同理(es7支持，babel转码器支持)
/*ReDialog.defaultProps= {
    title: '提示',
    ok:'确定',
    content:'默认值'
};*/

module.exports=ReDialog;
